<template>
  <n-form
      size="medium"
      :model="formData"
      :label-width="80"
      label-placement="left"
      :rules="rules"
      ref="form"
  >
    <template v-for="(item) in formArr" :key="item.key">
      <n-form-item
          :label="item.label"
          :path="item.key"
          :style="item.type === 'hidden' && {display: 'none'}"
      >
<!--        输入框-->
        <template v-if="item.type === 'input'">
          <n-input
              v-model:value="formData[item.key]"
              :placeholder="'请输入' + item.label"
          ></n-input>
        </template>
<!--        数字输入框-->
        <template v-if="item.type === 'number'">
          <n-input-number
              style="width: 100%"
              v-model:value="formData[item.key]"
              :placeholder="'请输入' + item.label"
          ></n-input-number>
        </template>
<!--        单选-->
        <template v-if="item.type === 'radio'">
          <n-radio-group
              v-model:value="formData[item.key]"
          >
            <n-space>
              <n-radio
                  v-for="radio in item.options"
                  :key="radio.value"
                  :value="radio.value"
              >{{ radio.label }}
              </n-radio>
            </n-space>
          </n-radio-group>
        </template>
<!--        树选择器-->
        <template v-if="item.type === 'tree'">
          <n-tree-select
              :multiple="item.multiple || false"
              :options="Array.isArray(item.treeOptions)? item.treeOptions : [item.treeOptions]"
              :placeholder="'请选择' + item.label"
              v-model:value="formData[item.key]"
          />
        </template>
<!--        上传-->
        <template v-if="item.type ==='upload'">
          <ImgUpload v-model:value="formData[item.key]" :url="item.url || false"></ImgUpload>
        </template>
<!--        选择器-->
        <template v-if="item.type === 'select'">
          <n-select
              :multiple="item.multiple || false"
              v-model:value="formData[item.key]"
              :placeholder="'请选择' + item.label"
              :options="item.options"
          ></n-select>
        </template>
        <template v-if="item.type === 'hidden'">
          <n-input
              style="display: none"
              v-model:value="formData[item.key]"
              :placeholder="'请输入' + item.label"
          ></n-input>
        </template>
      </n-form-item>
    </template>
  </n-form>
</template>

<script lang="ts">
export default {
  name: "ModalForm"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {FormInst} from 'naive-ui'
import {ModalFormInitType} from '@/type/ModalFormType'
import ImgUpload from '@/components/ImgUpload.vue'

const form = ref<FormInst| null>()

const rules = reactive<{
  [key: string]: {
    required: boolean
    message: string
    trigger: "change" | "blur"
  }
}>({})

const formArr = ref<ModalFormInitType[]>([])

const formData = reactive<{[key: string]: string | number}>({
})
function init (data: ModalFormInitType[]) {
  // console.log(data)
  formArr.value = data
  for (const item of data) {
    if (item.type === "number") {
      formData[item.key] = item.value as number
    }else {
      formData[item.key] = item.value as string
    }
    rules[item.key] = item.rules
  }
}

function validate<T = any> ():Promise<T> {
  return new Promise((resolve, reject) => {
    // console.log(formData)
    form.value?.validate(errors => {
      if (errors) {
        reject()
      }else {
        resolve(formData as T)
      }
    })
  })
}



defineExpose({
  init,
  validate
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
